<!--single line list with avtar --> 
<ul class="list-group pmd-z-depth pmd-list pmd-list-avatar pmd-card-list">
    <li class="list-group-item">
        <div class="media-left">
            <a href="javascript:void(0);" class="avatar-list-img">
                <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="http://propeller.in/components/list/img/40x40.png" data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body media-middle">
            Porta ac consectetur ac
        </div>
    </li>
    <li class="list-group-item">
        <div class="media-left">
            <a href="javascript:void(0);" class="avatar-list-img">
                <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="http://propeller.in/components/list/img/40x40.png" data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body media-middle">
            Porta ac consectetur ac
        </div>
    </li>
    <li class="list-group-item">
        <div class="media-left">
            <a href="javascript:void(0);" class="avatar-list-img">
                <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="http://propeller.in/components/list/img/40x40.png" data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body media-middle">
            Porta ac consectetur ac
        </div>
    </li>
</ul>

<!--single line list with avtar and icon -->
<ul class="list-group pmd-z-depth pmd-list pmd-list-avatar pmd-card-list">
    <li class="list-group-item">
        <div class="media-left">
            <a class="avatar-list-img" href="javascript:void(0);">
              <img data-holder-rendered="true" src="http://propeller.in/components/list/img/40x40.png" class="img-responsive" data-src="holder.js/40x40" alt="40x40">
            </a>
        </div>
        <div class="media-body media-middle">
            Porta ac consectetur ac
        </div>
        <i class="material-icons md-dark pmd-sm media-middle media-right">check_box</i>
    </li>
    <li class="list-group-item">
        <div class="media-left">
            <a class="avatar-list-img" href="javascript:void(0);">
                <img data-holder-rendered="true" src="http://propeller.in/components/list/img/40x40.png" class="img-responsive" data-src="holder.js/40x40" alt="40x40">
            </a>
        </div>
        <div class="media-body media-middle">
            Porta ac consectetur ac
        </div>
        <i class="material-icons md-dark pmd-sm media-middle media-right">check_box</i>
    </li>
    <li class="list-group-item">
        <div class="media-left">
            <a class="avatar-list-img" href="javascript:void(0);">
                <img data-holder-rendered="true" src="http://propeller.in/components/list/img/40x40.png" class="img-responsive" data-src="holder.js/40x40" alt="40x40">
            </a>
        </div>
        <div class="media-body media-middle">
            Porta ac consectetur ac
        </div>
        <i class="material-icons md-dark pmd-sm media-middle media-right">check_box</i>
    </li>
</ul>